<template>
	<view>
		<!-- <cover-image src="https://www.hualigs.cn/image/60113f069e330.jpg"></cover-image> -->
		<view class="bg-image1"></view>
		<view class="main">
			<!--左侧小区名称 右侧新增登记11-->
			<view id="head1" class="flex justify-around margin-top-sm ">
				<view url="shequ_list/shequ_list" class="flex align-center" @click="SelectShequ">
					<!-- <image class="cu-avatar sm round margin-left" style="background-image:url({{avatarUrl}});"></image> -->
					<text class="text-white text-xl">{{shequ.name}}</text>
					<view class="cuIcon-triangledownfill text-white" style="font-size: 50upx"></view>
				</view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view class="flex align-center">
					<!-- <navigator url="qrcode">
						<view class="cuIcon-add text-white text-bold" style="font-size: 50upx"></view>
					</navigator> -->
				</view>
			</view>
			<!--社区出行概况-->
			<view id="chuxing" class="flex  justify-center align-center margin-top-sm">
				<view class="head_box">

					<view class="flex justify-around text-df padding-top">
						<text>社区今日出入情况</text>
						<text>（单位：人次）</text>
					</view>
					<view class="flex justify-around padding-top-xl">
						<view class="flex flex-direction align-center">
							<text class="text-orange text-bold">{{today.count}}</text>
							<text>通行总数</text>
						</view>
						<view class="flex flex-direction align-center">
							<text class="text-orange text-bold">{{today.incount}}</text>
							<text>进入次数</text>
						</view>
						<view class="flex flex-direction align-center">
							<text class="text-orange text-bold">{{today.outcount}}</text>
							<text>外出次数</text>
						</view>
					</view>
				</view>
			</view>

			<!--两个功能按钮-->
			<view id="btn" class="flex justify-around margin-top-sm">
				<navigator url="../member_detail/member_detail" class="btn-box bg-gradual-blue flex align-center justify-center">
					<text class="text-xxl text-shadow" @click="scan">完善信息</text>
					<text class="cuIcon-edit padding-left-xs" style="font-size: 90upx;opacity: 0.2"></text>
				</navigator>
				<navigator url="../public/apply" class="btn-box bg-gradual-green flex align-center justify-center" @tap="hecha">
					<text class="text-xxl text-shadow">社区入驻</text>
					<text class="cuIcon-punch padding-left-xs" style="font-size: 90upx;opacity: 0.2"></text>
				</navigator>
			</view>
			<!--概况记录-->
			<view id="segmented" class="margin-top-sm">
				<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<!-- class="scroll" -->
			<scroll-view id="scroll" scroll-y="true" :style="{height:scrollHeight}">
				<view class="cu-list menu card-menu margin-top-sm">
					<navigator :url="'../member_detail/info?id=' + item.uid" class="cu-item" v-for="(item,key) in logList" :key="key">
						<view class="content padding-tb-sm">
							<view><text class="cuIcon-peoplefill text-blue margin-right-xs"></text>{{item.username}}</view>
							<view class="text-gray ">
								<text class="cuIcon-phone margin-right-xs"></text> {{item.userphone}}
							</view>
							<view class="text-gray ">
								<text class="cuIcon-timefill margin-right-xs"></text> {{item.addtime}}
							</view>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{item.shenfen}}</view>
						</view>
					</navigator>
				</view>
			</scroll-view>

		</view>

	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import {
		post,
		get,
		showModal
	} from '../../utils/index.js';
	import {
		Base64
	} from 'js-base64';
	var that;
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				current: 0,
				items: ['进入记录', '外出记录'],
				activeColor: '#66ccff',
				scrollHeight: '',
				today: {},
				shequ: {},
				logList: [],
				userInfo: {},
				avatarUrl: '',
				islogin: false
			}
		},
		onReady() {
			
			let _this = this;
			let segmented = uni.createSelectorQuery().select("#segmented");
			let sysinfo = uni.getSystemInfoSync();
			let Height = sysinfo.windowHeight;
			segmented.boundingClientRect(data => {
				// console.log(data);
				let sH = (Height - data.top - 32).toFixed();
				_this.scrollHeight = sH + 'px';
				// console.log(_this.scrollHeight);
			}).exec();


		},
		onLoad() {
			uni.setStorageSync('shequ_id', 1);
			uni.setStorageSync('shequ_name', '军转办小区125号');
			that = this;
			this.todayData();
			this.getLogList("进");
			that.avatarUrl = uni.getStorageSync('avatarUrl')
			
			uni.getStorage({
				key: 'shequ_name',
				success: (res) => {
					that.shequ.name = res.data;
				},
				fail: () => {
					uni.showModal({
						title: '读取数据失败',
						content: "请先绑定您的社区",
						showCancel: false
					})
				}
			});
			console.log(that.islogin)
		},
		//onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow: function() {
			this.todayData();
			this.shequ.name = uni.getStorageSync("shequ_name");
			wx.checkSession({ //检测当前用户的session_key是否过期
				success: function() { //session_key 未过期，并且在本生命周期一直有效
					console.log("授权未过期")
					that.islogin = true;
				},
				fail: function() { //session_key 已经失效，需要重新执行登录流程
				that.islogin = false;
				wx.navigateTo({
					url: "/pages/auth/auth" //重新授权
				})
				}
			})
		},
		methods: {
			
			todayData() {
				post(that.weixin_app + '/wxapp/today_data', {
					shequid: uni.getStorageSync("shequ_id")
				}).then(res => {
					that.today = res.data;
					// that.shequ = res.data.shequ;
					// uni.setStorageSync('shequ', res.data.shequ);
					that.getLogList('进');
				});

			},
			toLogin() {
				uni.showModal({
					title: '还未登录',
					content: "请先登录在进行操作",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							wx.navigateTo({
								url: "/pages/auth/auth" //重新授权
							})
						} else {
							reject()
						}
					}
				})
			},
			SelectShequ() {
				uni.$once('shequ_select', function(res) {
					if (res.type === 1) {
						post(that.weixin_app + '/wxapp/today_data', {
							shequid: res.shequ_id

						}).then(res => {
							//console.log(res);
							that.today = res.data;
							// that.shequ = res.data.shequ;
							// uni.setStorageSync('shequ', res.data.shequ);
						});
					}
				});
				uni.navigateTo({
					url: 'shequ_list/shequ_list'
				})
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
				if (index === 0) { //进入记录
					that.getLogList('进')
				} else if (index === 1) { //外出记录
					that.getLogList('出')
				}
			},
			hecha() {


				// #ifdef MP-ALIPAY
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						let data = res.result;
						let user_id = Base64.decode(data);
						uni.navigateTo({
							url: '../member_detail/member_detail?userid=' + user_id
						})
					}
				});
				// #endif

			},
			getLogList(type) {
				post(that.weixin_app + '/wxapp/getLogList', {
					ac: type,
					shequid: uni.getStorageSync('shequ_id'),
					uid: uni.getStorageSync('uid')
				}).then(res => {
					that.logList = res.data;
				})
			}
		}
	}
</script>

<style>
	cover-image {
		display: inline-block;
		position: absolute;
		left: 0;
		top: 0;
		height: 300rpx;
		width: 100%;

	}

	.bg-image1 {
		width: 100%;
		height: 300rpx;
		background: url(../../static/bg.png) no-repeat;
		background-size: cover;
		background-attachment: fixed;

	}

	.main {
		position: absolute;
		top: 0;
		width: 100%;
	}

	.head_box {
		width: 700upx;
		height: 220upx;
		background-color: #ffffff;
		border-radius: 15upx;
	}

	.btn-box {
		width: 310upx;
		height: 150upx;
		border-radius: 20upx;
	}

	.scroll {
		height: 700rpx;
	}
</style>
